@extends('layouts.default')
@section('css')
<link rel="stylesheet" href="{{asset('admin-lte/plugins/datatables/dataTables.bootstrap4.css')}}">
{{--<link rel="stylesheet" href="{{asset('admin-lte/dist/css/font-awesome4.4.0.css')}}">--}}
<style>
    .card-body td:hover{
        cursor: pointer;
    }
</style>
@stop

@section('content')
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">模板管理 / <a class="text-primary" href="{{url('admin/template/index')}}">模板列表</a></h3>
            </div>

            <div class="card-body">
                @include('layouts.message')
                <table id="example1" class="table table-bordered table-striped">
                    <thead>
                    <tr>
                        <th>模板名称</th>
                        <th>格子1</th>
                        <th>格子2</th>
                        <th>格子3</th>
                        <th>格子4</th>
                        <th>格子5</th>
                        <th>格子6</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>默认模板</td>
                        <td  data-grid="grid1">{!!getFieldValue($list,'grid1').'&nbsp;&nbsp;<span class="btn btn-info btn-sm relate_goods">关联商品</span>'!!}</td>
                        <td  data-grid="grid2">{!!getFieldValue($list,'grid2').'&nbsp;&nbsp;<span class="btn btn-info btn-sm relate_goods" >关联商品</span>'!!}</td>
                        <td  data-grid="grid3">{!!getFieldValue($list,'grid3').'&nbsp;&nbsp;<span class="btn btn-info btn-sm relate_goods">关联商品</span>'!!}</td>
                        <td  data-grid="grid4">{!!getFieldValue($list,'grid4').'&nbsp;&nbsp;<span class="btn btn-info btn-sm relate_goods">关联商品</span>'!!}</td>
                        <td  data-grid="grid5">{!!getFieldValue($list,'grid5').'&nbsp;&nbsp;<span class="btn btn-info btn-sm relate_goods">关联商品</span>'!!}</td>
                        <td  data-grid="grid6">{!!getFieldValue($list,'grid6').'&nbsp;&nbsp;<span class="btn btn-info btn-sm relate_goods">关联商品</span>'!!}</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
{{--关联商品的模态框--}}
<div class="modal fade" id="mymodal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle">选择商品</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <table id="example1" class="table table-bordered table-striped">
                    <thead>
                        <tr>
                            <th>操作</th>
                            <th>序号</th>
                            <th>商品名称</th>
                            <th>图片</th>
                            <th>原价</th>
                            <th>折扣价</th>
                            <th>库存</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>默认模板</td>
                            <td></td>
                        </tr>
                    </tbody>
                    <tfoot>
                        <tr>
                            <td colspan="7" id="pagecontainer"></td>
                        </tr>
                    </tfoot>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary modal-confirm">确认</button>
            </div>
        </div>
    </div>
</div>
<input type="hidden" name="template_id" value="{{getFieldValue($list,'template_id')}}">

@stop

@section('script')
<script>
    var token = '{{csrf_token()}}';
    $.ajaxSetup({headers: {'X-CSRF-TOKEN':token}});
    var templte = {
        grid_key : '',
        init:function(){
            //bind Events;
            var that = this;
            $('.relate_goods').on('click',function(e){
                that.grid_key = $(this).parent().data('grid');
                that.getGoodsList();
            });
            $('#mymodal').on('click','.pagination a',function(e){
                e.preventDefault();
                var href = $(this).attr('href');
                $.ajax({
                    url : href,
                    success:function(data){
                        var $html = that.renderTbody(data);
                        $('#mymodal tbody').html($html);
                        $('#pagecontainer').html(data.pages);
                    },
                })
            })
            $('.modal-confirm').on("click",function(e){
                var selected_goods = $('#mymodal :radio:checked').val();
                var data = {};
                data[that.grid_key] =  selected_goods;
                data.template_id = $("input[name='template_id']").val();
                data.template_name = '默认模板';
                that.ajax_save_template(data);
            })
        },
        getGoodsList(){
            var that = this;
            $.ajax({
                url : '{{$goods_list_api}}',
                method:'GET',
                success:function(data){
                    var $html = that.renderTbody(data);
                    $('#mymodal tbody').html($html);
                    $('#pagecontainer').html(data.pages);
                    $('#mymodal').modal();
                },
            })
        },

        ajax_save_template(data){
          $.ajax({
              url : '{{$save_template_url}}',
              method:"POST",
              data:data,
              success:function(res){
                  if(res.ret == 200){
                      layer.alert('更新模板成功');
                      $('#mymodal').modal('hide');
                  }
                  location.reload();
              }
          })
        },

        renderTbody(data){
            var $html = '';
            $.each(data.list.data,function(k,v){
                console.log(v,k);
                $html += '<tr>\n' +
                    '                            <td><input type="radio" name="goods_id" value="'+v.goods_id+'"></td>\n' +
                    '                            <td>'+v.goods_id+'</td>\n' +
                    '                            <td>'+v.goods_name+'</td>\n' +
                    '                            <td><img style="width:60px" src="'+v.image+'"></td>\n' +
                    '                            <td>'+v.price+'</td>\n' +
                    '                            <td>'+v.discount_price+'</td>\n' +
                    '                            <td>'+v.stock+'</td>\n' +
                    '                        </tr>';
            });
            return $html;
        }

    }
    templte.init();



</script>
@stop